import React, { useEffect } from 'react'
import styled from 'styled-components'
import { PlayingCard } from './PlayingCard'
import { EDispatchType, CardType, initialGameState, reduceHandler } from './reducer'

export const Wrapper = styled.main`
  padding: .1rem 7rem;
  background-color: hsla(142, 80%, 25%, 1);
  color: white;

  & div {
    /* border: 1px solid red; */
  }
  & div.players-area {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
  }
  & div.players-block {
  }
  & div.action-area {
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  & button {
    width: 100%;
    padding: .4rem;
    font-size: 20px;
  }
`
const DeckList = styled.ul`
  list-style: none;
  height: 120px;
  /* border: 1px solid blue; */
  display: flex;
  position: relative;

  & li {
    position: absolute;
    top: 0;
  }
`
export const CardsDeck = ({cards, gap}: {
  cards: CardType[],
  gap: number;
}) => {
  return (
    <DeckList>
    { cards.map((c, index) => (
      <li key={index} style={{left:`${index * gap}px`}}>
        <PlayingCard $row={c.row} $col={c.col} showBack={c.showBack} />
      </li>
    )) }
    </DeckList>
  )
}

export default function Demo() {
  const [ gameState, dispatch ] = React.useReducer(reduceHandler, initialGameState() );

  const onStart = () => { 
    dispatch({ type: EDispatchType.reset });
    dispatch({ type: EDispatchType.shuffle });
    dispatch({ type: EDispatchType.start });
  }
  const onHit   = () => { dispatch({ type: EDispatchType.hit }) }
  const onStand = () => { dispatch({ type: EDispatchType.stand }) }

  useEffect(() => {
    onStart()
  }, [] )

  const isClosed = gameState.closed;
  const dealerWin = gameState.winners.reduce((total, name) => (total + ((name==='dealer') ? 1:0)), 0);
  const playerWin = gameState.winners.reduce((total, name) => (total + ((name==='player') ? 1:0)), 0);
  return (
    <Wrapper>
      <h1 style={{textAlign: 'center', fontSize: '4rem'}}>Blackjack</h1>
      <div className='deck-area'>
        <CardsDeck cards={gameState.unknownCards} gap={9} />
      </div>

      <div className='players-area'>
        <div className='players-block'>
          <h1>Dealer {dealerWin}</h1>
          <h2>{!gameState.closed ? '??' : gameState.dealerScore}</h2>
          <CardsDeck cards={gameState.dealerCards} gap={20} />
        </div>

        <div className='action-area'>
          <button onClick={onStart} >Restart</button>
          <button onClick={onHit} disabled={isClosed}>Hit</button>
          <button onClick={onStand} disabled={isClosed}>Stand</button>
        </div>

        <div className='players-block'>
          <h1>Player {playerWin}</h1>
          <h2 style={{textAlign: 'right'}}>{gameState.playerScore}</h2>
          <CardsDeck cards={gameState.playerCards} gap={30} />
        </div>
      </div>


      <p>{gameState.winners.join(', ')}</p>
    </Wrapper>
  );
}
